<template>
	<view class="container-statistics" style="background: url(/static/imgbgc1.png) no-repeat; background-size: 100% 100%;height: 100%;">
		<view class="main">
			<view class="header flex-between">
				<view class="all bg">
					<view class="text">{{title}}</view>
					<view class="num">{{chartsDataLine1.totalflow ?chartsDataLine1.totalflow.toFixed(2):0}}</view>
				</view>
				<view class="my bg">
					<view class="text">{{$t('home.name13')}}</view>
					<view class="num">{{chartsDataLine1.yesterflow ?chartsDataLine1.yesterflow.toFixed(2):0 }}</view>
				</view>
			</view>
			<view class="charts-box">
				<view class="" style="color: #e3e3e3;font-size: 22rpx;margin-left: 20rpx;">
					{{title}}
				</view>
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
			<!-- <view class="charts-box">
				<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1" />
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				chartData: {},
				chartData1: {},
				opts: {
					color: ["#025eb5", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 0],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 4, //设置显示个数
						// format: 'formatterTime1'
						// disabled: true,
						axisLine: false,
						rotateLabel: true,
						marginTop: '5',
						fontSize: '10'
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// disabled: true, //Y轴直接隐藏
						disableGrid: true,
						data: [{
							axisLine: false,
						}
						// ,{
						// 	axisLine: false,
						// 	position:"right",
						// 	 min: 0,
						// 	max: 200,
						// },
						]
					},

					extra: {
						// area: {
						// 	type: "straight",
						// 	opacity: 0.2,
						// 	addLine: true,
						// 	width: 2,
						// 	gradient: false,
						// 	activeType: "hollow"
						// },
						line: {
							type: "curve",
							width: 1,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						},
						tooltip: {
							show: true,
							type: 'line',
							axisPointer: {
								type: 'cross'
							}
						},
					}

				},
				opts1: {
					color: ["#025eb5", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#00112c",
							// linearType: "custom"
						},
					}
				},
				chartsDataLine1: {},
				iconInfo: {

				},
				day: 30,
				type: null
			};
		},
		onLoad(options) {
			this.title = options.title
			this.type = options.type
			uni.setNavigationBarTitle({
				title: this.title
			})
			this.getServerData()
			this.onPieCharts()

		},
		methods: {
			onPieCharts() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "全网",
								"value": 50
							}, {
								"name": "我的",
								"value": 30
							}]
						}]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			onUecharts() {
				let res = {
					categories: this.chartsDataLine1.date,
					series: [{
						name: this.$t('home.name14'),
						data: this.chartsDataLine1.flow,
						setShadow: [
							5,
							10,
							20,
							"#025eb5"
						],
					},
					// {
					// 	name: this.$t('home.name15'),
					// 	data: [0,30,24,50,80,61,2,4,50,22,11,5,11,50,31,40,6,58,54,43,23,61,52,21],
					// 	index:1
					// },
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			clickTab(day) {
				this.day = day
				this.chartsDataLine1 = []
				this.getServerData()
			},
			jump(url) {
				this.$fun.jump(url)
			},
			getServerData() {
				this.$fun.ajax.post('user/incomeKinfo', {
					day: this.day,
					type: this.type
				}).then(res => {
					this.chartsDataLine1 = res.data
					this.onUecharts()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.container-statistics {
		// position: relative;
		height: 100%;
		.main {
			height: 100%;

			// display: flex;
			// flex-direction: column;
			// flex: 1;
			// background: #FFFFFF;
			.header {
				height: 176rpx;
				// background: rgba(255, 255, 255, 0.05);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				// padding: 0 100rpx;
				margin: 0 20rpx 20rpx;
				display: flex;
				justify-content: space-around;
				
				.bg{
					width: 290rpx;
					height: 165rpx;
					background: url('../../static/image1433@2x.png') no-repeat;
					background-size: 100% 100%;
					padding-top: 36rpx;
				}
				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 28rpx;
				}

				.num {
					font-family: DIN, DIN;
					font-weight: bold;
					font-size: 42rpx;
					color: #FFFFFF;
					line-height: 76rpx;
					text-align: center;
				}

				.all {
					text-align: center;
				}

				.my {
					text-align: center;
				}
			}

			.profit_top {
				display: flex;
				justify-content: space-around;
				margin-bottom: 100rpx;

				.profit_b {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 150rpx;
					height: 60rpx;
					background: #EEEEEE;
					border-radius: 30rpx;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #333333;
				}

				.active {
					background: #1E84F1;
					color: #FFFFFF;
				}
			}

			.charts-box {
				width: 100%;
				height: 600rpx;
				// padding-right: 30rpx;
			}

			.profit_view {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				padding: 0 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;

				.g {
					color: #333333;
				}

				.r {
					color: #1E84F1;
				}
			}

			.profit_list {
				padding: 24rpx 30rpx;
				background: #EEEEEE;

				.profit_title {
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					color: #333333;
				}

				.profit_itemt {
					margin-top: 30rpx;
					height: 80rpx;
					background: #F6F6F6;
					display: flex;
					justify-content: space-between;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					align-items: center;

					view {
						width: 25%;
						text-align: center;
						font-size: 30rpx;
						font-family: Microsoft YaHei;
						color: #999999;
					}

					view:not(:nth-child(1)) {
						text-align: left;
					}
				}

				.profit_item {
					height: 100rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: space-between;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					align-items: center;

					view {
						display: flex;
						justify-content: space-between;
						width: 25%;
						font-size: 30rpx;
						font-family: Microsoft YaHei;
						color: #FF0000;
						text-align: center;

						image {
							width: 14rpx;
							height: 24rpx;
							margin-right: 20rpx;
						}
					}

					view:nth-child(1) {
						width: 25%;
						color: #333333;
						display: flex;
						justify-content: center;
					}

					view:not(:nth-child(1)) {
						width: 25%;
						text-align: left;
						color: #FF0000;
					}
				}
			}
		}
	}
</style>